<template>
  <div
    :class="{
      'is-angle': value.layout.isShowAngle,
      'is-bg': value.layout.isShowBg,
      'is-shadow': value.layout.isShowShadow
    }"
    :style="getStyle()"
    class="dog-screen-paner"
  >
    <div v-if="value.layout.isShowHead"
      :style="getHeadStyle()"
      class="paner-head">
      <slot name="head">
        <div :style="getHeadTitleStyle()" :class="{'is-border': value.layout.isShowHeadBorder}" class="head-title">
          <label>{{ value.name }}</label>
        </div>
      </slot>
    </div>
    <div :style="getBodyStyle()" class="paner-body">
      <slot name="body">
        <div class="paner-content"></div>
      </slot>
    </div>
    <slot name="foot"></slot>
    <div class="foot-angle"></div>
  </div>
</template>

<script>
import props from './props.js'
import mixins from './mixins.js'

export default {
  mixins: [mixins],

  props: {
    value: {
      type: Object,
      default() {
        return {
          ...props
        }
      }
    }
  },

  methods: {
    // 全局样式
    getStyle () {
      let lay = this.value.layout || {}
      let style = {}
      if (lay.paddingTop) {
        style['padding-top'] = lay.paddingTop
      }
      if (lay.paddingRight) {
        style['padding-right'] = lay.paddingRight
      }
      if (lay.paddingBottom) {
        style['padding-bottom'] = lay.paddingBottom
      }
      if (lay.paddingLeft) {
        style['padding-left'] = lay.paddingLeft
      }
      if (lay.bgColor) {
        style.backgroundColor = lay.bgColor
      }
      if (lay.bgImgUrl) {
        style.backgroundImage = 'url(' + lay.bgImgUrl + ')'
      }
      if (lay.bgSize) {
        style.backgroundSize = lay.bgSize
      }
      if (lay.bgPosition) {
        style.backgroundPosition = lay.bgPosition
      }
      if (lay.bgRepeat) {
        style.backgroundRepeat = lay.bgRepeat
      }
      if (lay.shadow) {
        style['box-shadow']= lay.shadow
      }
      return style
    },
    // 头部样式
    getHeadStyle () {
      let lay = this.value.layout || {}
      let style = {}
      if (lay.headPaddingTop) {
        style['padding-top'] = lay.headPaddingTop
      }
      if (lay.headPaddingRight) {
        style['padding-right'] = lay.headPaddingRight
      }
      if (lay.headPaddingBottom) {
        style['padding-bottom'] = lay.headPaddingBottom
      }
      if (lay.headPaddingLeft) {
        style['padding-left'] = lay.headPaddingLeft
      }
      if (lay.headBgColor) {
        style.backgroundColor = lay.headBgColor
      }
      if (lay.headBgImgUrl) {
        style.backgroundImage = 'url(' + lay.headBgImgUrl + ')'
      }
      if (lay.headBgSize) {
        style.backgroundSize = lay.headBgSize
      }
      if (lay.headBgPosition) {
        style.backgroundPosition = lay.headBgPosition
      }
      if (lay.headBgRepeat) {
        style.backgroundRepeat = lay.headBgRepeat
      }
      return style
    },
    // 头部标题
    getHeadTitleStyle () {
      let lay = this.value.layout || {}
      let style = {}
      if (lay.headTextColor) {
        style['color']= lay.headTextColor
      }
      if (lay.headTextSize) {
        style['font-size']= lay.headTextSize
      }
      if (lay.headTextAlign) {
        style['text-align']= lay.headTextAlign
      }
      if (lay.headBorderColor) {
        style['border-color']= lay.headBorderColor
      }
      return style
    },
    // 内容样式
    getBodyStyle () {
      let lay = this.value.layout || {}
      let style = {}
      if (lay.bodyPaddingTop) {
        style['padding-top'] = lay.bodyPaddingTop
      }
      if (lay.bodyPaddingRight) {
        style['padding-right'] = lay.bodyPaddingRight
      }
      if (lay.bodyPaddingBottom) {
        style['padding-bottom'] = lay.bodyPaddingBottom
      }
      if (lay.bodyPaddingLeft) {
        style['padding-left'] = lay.bodyPaddingLeft
      }
      if (lay.bodyBgColor) {
        style.backgroundColor = lay.bodyBgColor
      }
      if (lay.bodyBgImgUrl) {
        style.backgroundImage = 'url(' + lay.bodyBgImgUrl + ')'
      }
      if (lay.bodyBgSize) {
        style.backgroundSize = lay.bodyBgSize
      }
      if (lay.bodyBgPosition) {
        style.backgroundPosition = lay.bodyBgPosition
      }
      if (lay.bodyBgRepeat) {
        style.backgroundRepeat = lay.bodyBgRepeat
      }
      return style
    }
  }
}
</script>

<style lang="less" scoped>
@import './style/panel.less';
</style>
